<template>
  <el-slider
    class="cus-top-slider"
    v-model="sliderValue"
    size="small"
    :show-tooltip="false"
    :min="0"
    :max="100"
    @change="changeProgress"
  />
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { usePlayerStore } from '@/stores/player'

const { changeProgress, sliderValue } = toRefs(usePlayerStore())
</script>

<style lang="less" scoped>
/* 在Less中，小数值类是无法直接使用@apply指令的。less不能直接用小数当类名 */

.cus-top-slider {
  padding: 0;
  :deep(.el-slider__runway) {
    height: 0.125rem;
    .el-slider__bar {
      height: 0.125rem;
    }
    .el-slider__button-wrapper {
      height: 1rem;
      width: 1rem;
      top: -0.5rem;
      .el-slider__button {
        height: 0.625rem;
        width: 0.625rem;
      }
    }
  }
}
</style>
